<div class="body">
  <div class="body_resize">
    <div class="left">
      <small>
        <h1><small>Mis Direcciones</small></h1>
        <p>
          <b>
            <table border= "1" cellspacing="7" >
              <%@cont = 0%>
              <% @direccions.each do |direccion| %>
                <%@cont = @cont + 1%>
                <small><span style="font-style: italic; font-weight: bold; font-size: small">"<%=h direccion.nombre %>"     |</span></small>
                <small><span style="font-style: italic; font-weight: bold"><%=h direccion.residencia_calle %></span></small>
                <small><span style="font-style: italic; font-weight: bold">, Apto/Casa # <%=h direccion.apartamento_num_casa %></span></small>
                <small><span style="font-style: italic; font-weight: bold"><%=h direccion.urbanizacion %>, </span></small>
                <small><span style="font-style: italic; font-weight: bold"><%=h direccion.ciudad %></span></small>
                <small><span style="font-style: italic; font-weight: bold"><%=h direccion.pais %></span></small>
                <small><span style="font-style: italic; font-weight: bold"><%=h direccion.codigo_postal %></span></small>
                <small><span style="font-style: italic; font-weight: bold"><%= link_to 'Mostrar', direccion %>
                    <%= link_to 'Editar', edit_direccion_path(direccion) %>
                    <%= link_to 'Borrar', direccion, :confirm => 'Esta seguro que desea borrar esta direccion?', :method => :delete %></span></small><br />
              <%end%>
            </table>
          </b>
        </p>

        <br></br>

        <b><%= link_to 'Introduzca otra dirección', new_direccion_path, :id => session[:cliente_id]  %></b>
      </small>

      <small><h2>Mis Direcciones</h2></small>
      <br></br>

      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <script type="text/javascript">
        var centrodelmapa = new google.maps.LatLng(10.496420232955682, -66.906738281258);

        var marker;
        var map;

        function initialize() {
          var mapOptions = {
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: centrodelmapa
          };

          map = new google.maps.Map(document.getElementById("map"),
          mapOptions);
<% @direccions.each do |direccion| %>
      var positionmarcador = new google.maps.LatLng(<%=direccion.latitud%>, <%=direccion.longitud%>);
      marker = new google.maps.Marker({
        map:map,
        draggable:false,
        animation: google.maps.Animation.DROP,
        position: positionmarcador
      });
      google.maps.event.addListener(marker, 'click', toggleBounce);
<%end%>
            
  }

  function toggleBounce() {

    if (marker.getAnimation() != null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }
  function coordinates() {
    var point = new google.maps.LatLng(marker.getPosition().lat(),marker.getPosition().lng(),true);
    map.panTo(point);
    document.getElementById("direccion_latitud").value = point.lat();
    document.getElementById("direccion_longitud").value = point.lng();
  }
      </script>

      <body onload="initialize()"></body>
      <center>
        <div id="map" style="width: 610px; height: 480px"></div>
        <div id="message"></div>
        <br></br>
      </center>


    </div>

    <div class="right">
      <br></br>
      <small>Hola!   </small><small><%= session[:cliente_nombre]%></small>
      <small><%= link_to 'Finalizar Sesión', :controller => :session, :action => :fin_sesion %></small>
      <br></br>
      <img src="/images/carretillaCajita.jpg" alt="" width="270" height="270" />

    </div>
    <div class="clr"></div>
  </div>
</div>